<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象</title>
</head>
<body>
<div>123</div>
<p id="nav">导航栏</p>
<div>456</div>
<div>789</div>
<div>159</div>
<div class="box">我是文字的内容</div>
</body>
<script>
    /*
    * 变量声明类型: var let const
    *   var 首先排除，老派写法，已经淘汰
    *   let 可以改变
    *   const 优先，尽量使用const，const语义化更好————一次声明后不会改变
    *             拿到变量后先赋值给const，如果后续发现它是可以要被修改的就再改为let
    *   注意：
    *      值类型用const标志后就不允许修改，引用类型用const标志后可以修改
    *       const只是不允许修改栈内的值而已，引用类型的栈中保存的是一个地址，这个地址一般是变不了了
    * */
    // 数组是可以用const之后修改属性的，而且这种写法更高级
    const arr = ['pink' , 'blue']
    console.log('旧数组：' , arr)
    arr.push('black')
    console.log('新数组：' , arr)
    /*
    * WebAPIs
    *   作用: 就是用JS去操作html和浏览器
    *   分类: DOM(文档对象类型)、BOM(浏览器对象类型)
    *   DOM:
    *      DOM(文档对象类型)是用来呈现以及与任意HTML和XML文档交互的API
    *      （浏览器提供的一套专门用来操作网页内容的功能）
    *      DOM的作用
    *           开发网页内容和实现用户交互
    *   DOM树:
    *       概念: 将HTML文档以树状结构直观的表现出来，我们称之为文档树或者DOM树
    *       作用: 文档树直观的体现了标签与标签之间的关系
    *   DOM对象:
    *       概念: 浏览器根据html标签生成的JS对象
    *   document:
    *       是DOM里提供的一个对象，网页中所有的内容都在document里面
    * */

    // 操作文档对象并打印
        // document.querySelector('对象名')是文档对象操作函数,标签里的对象属性有与其相关的所有值
    const div = document.querySelector('div')
        // console.dir是文档对象打印函数
    console.dir(div)
    console.log(typeof div)

    // 查看document对象
    console.log(document)
    console.dir(document)

   /*
   *  获取DOM对象的方式
   *    1. 根据CSS选择器来获取DOM元素
   *        (1) 选择匹配的第一个元素
   *            document.querySelector('CSS选择器（最开头的标签号 或者 .class名 或者 #id名）')
   *        (2) 选择匹配的所有元素
   *            document.querySelectorAll('CSS选择器')
   *            注意：这个得到的是一个伪数组，不能用数组的增、删、改、查方式——————哪怕只有一个元素用这个方法得到的也是伪数组
   * */
    // 1.获取匹配的第一个元素
    const box = document.querySelector('div')
    console.log(box)
    console.dir(box)

    const p = document.querySelector('p')
    console.log(p)
    console.dir(p)

    // 1.获取匹配的所有元素
    const boxes = document.querySelectorAll('div')
    console.log(boxes)

    /*
    * 操作元素内容:
    *   1. 对象.innerText属性
    *       不解析标签
    *   2. 对象.innerHTML属性
    *       可解析标签
    **/
    // 1.获取元素
    const box2 = document.querySelector('.box')
    // 2.修改文字内容  对象.innerText属性
    console.log(box2.innerText) // 获取文字内容
    // 不识别标签
    box2.innerText = '我是修改的文字内容'
    // 识别标签
    box2.innerHTML = `<strong>我是修改的文字内容<\strong>`

    /*
    * 操作元素属性:
    *   1.操作元素常用属性
    *       可以通过JS设置/修改标签元素属性，比如通过src更换图片
    *           href 、title 、src
    *       语法： 对象.属性 = 值
    *
    *   2.操作元素样式属性
    *
    * */
</script>
</html>